<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>效果</title>
    <script src="../../js/jquery-3.6.1.js"></script>
    <style>
        #d1{
            width: 20px;
            height: 20px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <button onclick="changeDiv()">点击</button>
    <br>
    <img src="../../png/指指点点.png" id="d1">
</body>
<script>
    function changeDiv(){
        // $('#d1').hide() //隐藏
        // $('#d1').show() //显示
        // $('#d1').toggle(2000) //切换
        // $('#d1').slideUp(2000) //隐藏
        // $('#d1').slideDown(2000) //显示
        // $('#d1') .slideToggle(2000)//切换
        // $('#d1').fadeOut(2000) //隐藏透明
        // $('#d1').fadeIn(2000) //显示
        // $('#d1').fadeToggle(2000)//切换
        if($('#d1').width()==20){
            $('#d1').animate({
            'width':'500px',
            'height':'500px'
            },1000)
        }else{
            $('#d1').animate({
            'width':'20px',
            'height':'20px'
            },1000)
        }
    }
</script>
</html>